<template>
	<view style="margin: 20rpx 27rpx; background-color: #f7f7f7;">
		<view class="note">
			填写指南（必看）<text @click="onskip('')">点击查看</text>
			<!-- <uni-notice-bar background-color="#FFF8E6" show-icon scrollable text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" /> -->
		</view>
		<view class="head">
			<view class="mokuai">
				<view class="tit">姓名</view>
				<view class="input">
					<input type="text" @input="input1" placeholder="请输入" v-model="name" placeholder-style="color: #999999; font-size: 27rpx; font-weight: 500; text-align:right;" style="text-align: right;" />
					<image class="img" src="../../static/gengduo.png" mode=""></image>
				</view>
				
			</view>
			<view class="mokuai">
				<view class="tit">抖音号</view>
				<view class="input">
					<input type="text"@input="input2" placeholder="请输入" v-model="dyId" placeholder-style="color: #999999; font-size: 27rpx; font-weight: 500; text-align:right;" style="text-align: right;" />
					<image class="img" src="../../static/gengduo.png" mode=""></image>
				</view>
				
			</view>
			<view class="mokuai">
				<view class="tit">身份证号码</view>
				<view class="input">
					<input type="text" @input="input3" maxlength="18" v-model="idCard"  placeholder="请输入" placeholder-style="color: #999999; font-size: 27rpx; font-weight: 500; text-align:right;" style="text-align: right;" />
					<image class="img" src="../../static/gengduo.png" mode=""></image>
				</view>
				
			</view>
			<!-- <view class="msg"><span style="color: #F81515;">*</span>请输入真实电话号码，提交成功后 将由后台管理员与您联系</view> -->
		</view>
		<button class="btn" @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				dyId:'',
				idCard:'',
			};
		},
		onLoad() {
			this.$api.get("my/darenruzhu").then(res =>{
				console.log('入驻111',res)
				this.name = res.realname
				this.dyId = res.douyinhao
				this.idCard = res.usercard
			})
		},
		methods:{
			input1(e){
				console.log('input111',e)
				this.name = e.detail.value
			},
			input2(e){
				console.log('input222',e)
				this.dyId = e.detail.value
			},
			input3(e){
				this.idCard = e.detail.value
				console.log('input333',e)
			},
			submit(){
				this.$api.post("my/darenruzhu",{realname:this.name,douyinhao:this.dyId,usercard:this.idCard}).then(res =>{
					uni.showToast({
						title:res.msg
					})
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/tabs/shouyi"
						})
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.note{
		// margin: 27rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		background: #FFF8E6;
		border-radius: 20rpx;
		padding: 21rpx 27rpx;
		>text{
			color: #F43B3B;
		}
	}
	.mokuai{
		padding: 35rpx 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		border-radius: 13rpx;
	}
	.input{
		display: flex;
		image{
			width: 10rpx;
			height: 18rpx;
		}
		input{
			width: 500rpx;
		}
		
	}
	 input::placeholder {
	        text-align: right;
	    }
	.tit{
		font-weight: bold;
		font-size: 29rpx;
		color: #333333;
	}
	.img{
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.msg{
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		margin-top: 22rpx;
	}
	.btn{
		width: 697rpx;
		height: 87rpx;
		background: #3681F3;
		border-radius: 13rpx;
		font-weight: bold;
		font-size: 29rpx;
		color: #FFFFFF;
		margin-top: 80rpx;
	}
</style>
